<template>
  <div id="root">
    <div class="home-wrap">
      <div class="m-site-top">
        <div class="container clearfix">
          
          <div class="fr">
            <div class="f1 site-item m-user-con">
              <div class="m-no-login">
                <a href="#" class="m-safe-anchor">登录</a>
                <a href="#" class="m-safe-anchor">注册</a>
              </div>
            </div>
            <span class="f1 m-line"></span>
            <div class="f1 m-help">
              <a rel="noopener onreferrer" target="_blank"  href="https://m.xiaomiyoupin.com/help" class="m-safe-anchor">
                帮助中心
              </a>
            </div>
            <span class="f1 m-line"></span>
            <div class="f1 m-download site-item">
              <a href="https://www.xiaomiyoupin.com/download" target="_blank" class="m-safe-anchor h-icon-con">
                <span class="iconfont icon-shouji1-copy" data-src href>下载APP
                </span>
              </a>
            </div>
            <span class="f1 m-line"></span>
            <div class="f1 m-clauses-con">
              <div class="m-clauses">
                <a rel="noopener onreferrer" target="_blank"  href="https://m.xiaomiyoupin.com/help" class="m-safe-anchor">
               资质证照&nbsp;/&nbsp;协议规则
                </a>
              </div>
              <div class="h-icons h-down-icon h-down-icon-new">
              <div class="iconfont icon-jiantouxia-copy" style="width:13px;height:13px;cursor:default;">
              </div>
            </div>
            <!--下拉菜单-->
              <div class="dropdown hidden">
              <ul class="hide">
                <li><a data-target="_blank" target="_blank" data-src="资质证明" href="https://daren.xiaomiyoupin.com/ewen/pageFromId?id=gurkg3d4bh7bbe6q" class="m-safe-snchor">
                    资质证明
                  </a></li>
                <li><a data-target="_blank" target="_blank" data-src="协议规则" href="https://daren.xiaomiyoupin.com/ewen/pageFromId?id=ytf4mzipem9cr7fj" class="m-safe-snchor">
                    协议规则
                  </a></li> 
              </ul>
            </div>
          </div> 
        </div>
      </div>
    </div>
  </div>
</div>
  

   
</template>
  
<script>
import {useStore} from 'vuex'
import {computed} from 'vue';
export default{
  setup(props){
    const store=useStore();
    let userinfo=computed(()=>{
      return store.state.user.userinfo;
    });

    return {userinfo};
  }
}
  </script>
  
  <style lang="less" scoped>
  //@import url('../assets/styles/variables.less');
div{
  display:block;
}
li,ol,ul{
  list-style: none;
}
div,ul,li,ol,p{
  margin: 0;
  padding: 0;
}
li{
  display:list-item;
}


 //导航栏样式
 
 //悬停变色
  .m-site-top .fr a:hover{
    color: #fff;
  }
    
  
  //
  .m-site-top{
    height:48px;
    background:#333;
    font-size:14px;
    position:relative;
    z-index:105;
  }
  .m-site-top .site-item{
    position:relative;
    margin-left:5px;
    text-align:center;
  }
  //块之间的间隔
.m-site-top .m-line{
  border-color:#666;
  margin:17px 3px 0 6px;
}

.m-line{
  display:inline-block;
  height:16px;
  vertical-align:middle;
  border-right:1px solid #e7e7e7;
}
//块样式
.f1{
  float:left;
}
.fr{
    float:right;
  }
  //
  .m-site-top,.m-site-top a{
    color:#e7e7e7;
  }
  //a标签样式
  a, button{
    outline:none;
  }
  a{
    text-decoration: none;
  }
  .clearfix:after,
  .clearfix:before{
    content:"";
    display:table;
  }
  .container{
    width:1080px;
    margin:0 auto;
  }
  .clearfix:after{
    clear:both;
  }
  .clearfix:after,
  .clearfix:before{
    content:"";
    display:table;
  }
  
 
  //登录注册块样式
  .m-site-top .site-item{
    position:relative;
    margin-left:5px;
    text-align:center;
  }
  
  //未登录
  .m-site-top .m-no-login{
    position:relative;
    text-align: center;
    height: 48px;
    line-height: 48px;
    margin-right:8px;
    margin-left:11px;
  }
  .m-site-top .m-no-login .m-site-top .m-user{
    height:48px;
    line-height:48px;
  }
  .m-site-top .m-no-login a{
    margin-left: 8px;
  }
  .m-site-top .m-site-top a{
    color:#e7e7e7;
  }
 
  
  .m-site-top .site-item-nav{
    position:absolute;
    left:0;
    top:48px;
    display:block;
    overflow:hidden;
    box-shadow:0 3px 28px rgba(0,0,0,1);
    transition:all .3s cubic-bezier(0,1,.5,1);
    background:#fff;
  }

//帮助块
.m-site-top .m-help{
  position:relative;
  text-align:center;
  height:48px;
  line-height:48px;
  margin-right:8px;
  margin-left: 11px;
}
//下载块
.m-site-top .m-download .h-icon-con{
  text-align:left;
  left:0;
  padding-left:30px;
}
.m-site-top .h-icon-con{
  display:block;
  height:48px;
  line-height:48px;
  overflow:hidden;
}
.h-icon-con{
  margin-right:5px;
  position:relative;
}
.h-icons{
  position:absolute;
}
//顶部iconfont图标
.m-site-top
.iconfont{
  display:inline-block;
}
 //资质证照
 .m-site-top .m-clauses-con
 {
  position:relative;
  text-align: center;
  padding-right: 40px;
  padding-left: 11px;
 }
 .m-site-top .m-clauses-con .m-clauses{
   height:48px;
   line-height: 48px;
   text-align: center;
 }
 .m-site-top,.m-site-top{
  color: #e7e7e7;
 }
 //下拉箭头
 .m-site-top .m-clauses-con .h-down-icon{
  right:10px;
 }
 .m-site-top .h-down-icon-new{
  line-height: 28px;
  top:10px;
  right:5px;
 }
 .m-site-top .h-down-icon{
  top:10px;
  right:0;
 }
 .h-icons{
  position: absolute;
 }
 //隐藏导航栏
 .dropdown{
    display: none;
 }
 .dropdown .hide ul{
  list-style: none;
  text-align: end;
 }
 .dropdown .hide ul li{
  display: inline-block;
  position: relative;
 }
 .dropdown .hide ul li a{
  display: block;
  padding: 20px 45px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
 }

  .m-site-top .fr .m-clauses-con:hover .dropdown{
    text-align: center;
    display: block;
    width: 140px;
    height: 20px;
    padding: 20px;
    background-color: #fff;
    position: absolute;
    z-index: 1;
    right: 5px;
  }
  .dropdown .hide a{
    color: #333;
    font-size: 15px;
  }

  li:hover{
    background: #9F8052;
  }
  </style>